/* stylelint-disable docusaurus/copyright-header */

/* @import "tailwindcss"; but without preflight */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@source "../**/*.{js,jsx,ts,tsx}";

@theme {
  --color-neutral-white: #ffffff;
  --color-neutral-n1: #f6f6f6;
  --color-neutral-n2: #f1f1f1;
  --color-neutral-n3: #e5e5e5;
  --color-neutral-n4: #d7d7d7;
  --color-neutral-n5: #c2c2c2;
  --color-neutral-n6: #a9a9ac;
  --color-neutral-n7: #8b8b8e;
  --color-neutral-n8: #6d6d70;
  --color-neutral-n9: #4f4f52;
  --color-neutral-n10: #38383a;
  --color-neutral-n11: #292929;
  --color-neutral-n12: #141414;
  --color-neutral-n13: #111111;
  --color-neutral-black: #000000;

  --color-plum-p1: #f4e9f1;
  --color-plum-p2: #e3d0df;
  --color-plum-p3: #d7b3cf;
  --color-plum-p4: #8d2676;
  --color-plum-p5: #711e5e;
  --color-plum-p6: #47133b;

  --color-yellow-y1: #fdefd2;
  --color-yellow-y2: #f8d077;
  --color-yellow-y3: #f3b01c;
  --color-yellow-y4: #e7a71b;

  --color-red-r1: #fcd6d5;
  --color-red-r2: #f15d59;
  --color-red-r3: #ee342f;
  --color-red-r4: #d62f2a;

  --color-green-g1: #e5f3dc;
  --color-green-g2: #72c043;
  --color-green-g3: #4fb014;
  --color-green-g4: #479e12;

  --color-transparent: transparent;

  --font-sans: "Inter", "sans-serif";
}

/* Apply the dark mode when [data-theme="dark"] is present */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */
@font-face {
  font-family: "GT America";
  font-weight: 400;
  font-display: swap;
  src: url(https://docs.convex.dev/fonts/GT-America-Standard-Regular.woff2);
}
@font-face {
  font-family: "GT America";
  font-weight: 500;
  font-display: swap;
  src: url(https://docs.convex.dev/fonts/GT-America-Standard-Medium.woff2);
}
@font-face {
  font-family: "GT America";
  font-weight: 700;
  font-display: swap;
  src: url(https://docs.convex.dev/fonts/GT-America-Standard-Bold.woff2);
}
@font-face {
  font-family: "GT America";
  font-weight: 900;
  font-display: swap;
  src: url(https://docs.convex.dev/fonts/GT-America-Standard-Black.woff2);
}

/* You can override the default Infima variables here. */
:root {
  --convex-opaque-background-color: white;
  --ifm-color-primary: #8d2676;
  --ifm-color-primary-dark: #7f226a;
  --ifm-color-primary-darker: #782064;
  --ifm-color-primary-darkest: #631b53;
  --ifm-color-primary-light: #9b2a82;
  --ifm-color-primary-lighter: #a22c88;
  --ifm-color-primary-lightest: #b73199;
  --ifm-toc-border-color: #e5e5e5;
  --docusaurus-highlighted-code-line-bg: #dde8fa;
  --convex-docs-logo-font-color: black;
  --convex-link-underline-color: #bbb;
  --convex-code-border-color: rgba(0, 0, 0, 0.04);
  --convex-code-block-header-background-color: #eef2f9;

  --doc-sidebar-width: 270px !important; /* Reduced from default 300px */

  --ifm-code-padding-horizontal: 0.25rem;
  --ifm-global-shadow-lw: none;

  --ifm-navbar-shadow: none;
  --ifm-navbar-height: 4rem;

  --ifm-menu-color-active: var(--ifm-navbar-link-color);
  --ifm-menu-color-background-active: rgb(222, 226, 234);
  --convex-active-background: rgb(222, 226, 234);
  /* Copy of the sidebar chevron/arrow svg to make it smaller and darker */
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="-12 -12 48 48"><path fill="rgb(28, 30, 33)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
  --convex-sidebar-icon-filter: none;
  --convex-toc-background-color: rgba(255, 255, 255, 1);
  --ifm-menu-link-padding-vertical: 0.4375rem;
  --ifm-menu-link-padding-horizontal: 0.625rem;

  --ifm-menu-link-sublist-icon-filter: none;
  --ifm-scrollbar-track-background-color: auto;
  --ifm-scrollbar-thumb-background-color: auto;

  --convex-breadcrumb-font-color: #797979;
  --ifm-breadcrumb-padding-horizontal: 0;
  --ifm-breadcrumb-padding-vertical: 0;
  --ifm-breadcrumb-item-background-active: none;
  --ifm-breadcrumb-color-active: var(--convex-breadcrumb-font-color);

  --convex-container-padding-horizontal: 0rem;

  --ifm-card-border-radius: 6px;

  --ifm-code-font-size: 95%;
  --ifm-font-weight-semibold: 400;
  --ifm-font-family-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto,
    Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";

  /* Footer */
  --ifm-footer-background-color: var(--ifm-background-color);
  --ifm-footer-color: #6e6e6e;

  /* Convex colors */
  --color-white: #ffffff;
  --color-n1: #f6f6f6;
  --color-n2: #f1f1f1;
  --color-n3: #e5e5e5;
  --color-n4: #d7d7d7;
  --color-n5: #c2c2c2;
  --color-n6: #adadad;
  --color-n7: #939393;
  --color-n8: #797979;
  --color-n9: #6e6e6e;
  --color-n10: #3f3f3f;
  --color-n11: #292929;
  --color-n12: #141414;
  --color-n13: #111111;
  --color-black: #000000;

  --color-error: #ee342f;

  /* Zen of Convex */
  --convex-zen-do-color: var(--ifm-color-success-dark);
  --convex-zen-do-not-color: var(--ifm-color-warning-dark);

  --ifm-font-size-base: 0.9375rem;
  --ifm-line-height-base: 1.6;
  --ifm-h1-font-size: 2rem;
  --ifm-h2-font-size: 1.5rem;
  --ifm-h3-font-size: 1.25rem;
  --ifm-h4-font-size: 1rem;
  --ifm-heading-margin-bottom: 1rem;
  --ifm-spacing-vertical: 1rem;
  --ifm-paragraph-margin-bottom: 1rem;
}

/* Sets the main top-left logo size */
.navbar__logo {
  height: 2.5rem;
  margin-right: 0;
}

/* Bring "docs" closer to convex logo */
.navbar__brand {
  margin-right: 0;
}

/* Fix the size of the logo when the content on the right is scrolled
and the navbar is hidden, no good classname */
div.convex-sidebar-header img {
  height: 2.5rem;
  margin-right: 0;
}

/* START: Replicate the "docs" in navbar at the top of the swizzled sidebar
for when the whole page is scrolled down */
.convex-sidebar-header {
  display: flex;
  font-size: 1.75rem;
  align-items: center;
}
.convex-sidebar-header a {
  color: var(--convex-docs-logo-font-color);
}

.convex-sidebar-header a:hover {
  text-decoration: none;
  color: var(--ifm-navbar-link-hover-color);
}

.convex-sidebar-header > a {
  margin-right: 0;
}
/* END: Replicate the "docs" in navbar at the top of the swizzled sidebar
for when the whole page is scrolled down */

/* Stylize "docs" in the navbar  */
.navbar__items:not(.navbar__items--right) .navbar__item:nth-child(3) {
  display: flex;
  font-size: 1.75rem;
  padding-left: 0;
  padding-right: 3rem;
  color: var(--convex-docs-logo-font-color);
  padding-top: 0;
  padding-bottom: 0;
}

.convex-docs-title {
  display: none;
}

@media (min-width: 997px) {
  .convex-docs-title {
    display: block;
    width: auto;
    height: 2.5rem;
  }
}

/* "docs" in the navbar hover */
.navbar__items:not(.navbar__items--right) .navbar__item:nth-child(3):hover {
  color: var(--ifm-navbar-link-hover-color);
}

/* Adds border to top navbar (original has drop shadow) */
.navbar {
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

/* Customize the search button in nav and modal */
@import url("./search.css");

/* START: Icon links in top nav */
@media (min-width: 997px) {
  .navbar__items .convex-icon-link {
    width: 1.25rem;
    height: 1.5rem;
    margin: var(--ifm-navbar-item-padding-vertical)
      var(--ifm-navbar-item-padding-horizontal);
    display: inline-block;
    background-color: var(--ifm-navbar-link-color);
    font-size: 0;
  }

  .convex-icon-link svg {
    display: none;
  }

  .navbar__items .convex-dashboard-button {
    border-radius: 6px;
    padding: 0.35rem 0.5rem 0.25rem 0.5rem;
    background-color: var(--ifm-navbar-link-color);
    color: var(--ifm-toc-border-color);
  }

  .navbar__items .convex-dashboard-button:hover {
    background-color: var(--ifm-navbar-link-hover-color);
  }

  .convex-dashboard-button svg {
    display: none;
  }

  .convex-blog-button {
    @apply ml-2;
  }

  .navbar__items .convex-github-logo {
    mask: url("../../static/img/github-logo.svg") no-repeat center;
  }

  .navbar__items .convex-discord-logo {
    mask: url("../../static/img/discord-logo.svg") no-repeat center;
  }

  .navbar__items .convex-icon-link:hover {
    background-color: var(--ifm-navbar-link-hover-color);
  }
}

/* END: Icon links in top nav */

/* Fix the padding around the light mode / dark mode switcher
which doesn't have a good class name */
.navbar__items--right > :not(.navbar__item),
.navbar-sidebar__brand :nth-child(2) {
  margin: 0 6px;
  --ifm-color-emphasis-200: none;
}

/* Light/dark mode switcher hover color to match other icons */
.navbar__items--right > :not(.navbar__item):hover,
.navbar-sidebar__brand :nth-child(2):hover {
  color: var(--ifm-navbar-link-hover-color);
}

/* Increases sidebar padding, also to have enough space for scrollbar */
.navbar-sidebar__item {
  padding: 0.5rem 1.375rem 0.5rem 1.375rem !important;
}

/* Matches the sidebar badding for the hamburger menu */
nav.menu {
  padding: 1rem 1.375rem 1rem 1.375rem !important;
}

/* START: Make the sidebar arrows smaller */
.menu__caret:before {
  width: 0.75rem;
}

.menu__link--sublist-caret:after {
  min-width: 0.75rem;
  width: 0.75rem;
}
/* END: Make the sidebar arrows smaller */

/* Decreases sidebar font-size except for top level */
.theme-doc-sidebar-item-link-level-2,
.theme-doc-sidebar-item-link-level-3,
.theme-doc-sidebar-item-link-level-4,
.theme-doc-sidebar-item-category-level-2,
.theme-doc-sidebar-item-category-level-3,
.theme-doc-sidebar-item-category-level-4 {
  font-size: 0.875rem;
}

/* reset padding on container because we added footer inside of it */
main > .container {
  padding: 0 !important;
  max-width: unset !important;
}

/* Increase the padding on the main text */
main > .container > .row {
  padding: 0.75rem var(--convex-container-padding-horizontal) 1.5rem;
  margin: 0;
}

/* Increase the padding on the main text - actually increase it on big screens */
@media (min-width: 997px) {
  :root {
    --convex-container-padding-horizontal: 1rem;
  }
}

/* Gray out breadcrumbs */
.breadcrumbs__link {
  color: var(--convex-breadcrumb-font-color);
}

/* Gray links in content */
article .markdown a {
  --ifm-link-color: auto;
  --ifm-link-decoration: underline;
  --ifm-link-hover-color: #888;
  transition:
    color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
    text-decoration-color var(--ifm-transition-fast)
      var(--ifm-transition-timing-default);
  text-underline-position: under;
  text-decoration-thickness: 1px;
}

/* Fix underlines to match text color on hover, visually */
article .markdown a:hover {
  text-decoration-color: var(--convex-link-underline-color);
}

/* Article is the main container for most content. Use it for container queries */
article {
  container-type: inline-size;
}

/* Pushes the links underline lower, looks better */
a {
  text-underline-position: under;
}

/* No underline for pagination and other card links */
a.pagination-nav__link,
article .markdown a.card {
  --ifm-link-decoration: none;
  --ifm-link-hover-decoration: none;
}

/* Nicer style for inline code blocks */
article code {
  border-color: var(--convex-code-border-color);
  border-width: 1px;
}

/* Nicer header style for code blocks */
.theme-code-block > div:first-child:not(:only-child) {
  border-bottom: none;
  padding: 0.5rem var(--ifm-pre-padding);
  background-color: var(--convex-code-block-header-background-color);
}

/* START: Custom cards implementation */
.cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.qs-cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.component-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.component-card {
  display: block;
  padding: 1.5rem;
  border-radius: var(--ifm-card-border-radius);
  text-decoration: none;
  border: 1px solid var(--ifm-toc-border-color);
  background: var(--ifm-background-color);
  min-height: 130px;
  box-shadow: none;
}

.component-card:hover {
  box-shadow: none;
  background-color: var(--ifm-menu-color-background-active);
  color: var(--ifm-font-color-base);
  text-decoration: none;
}

.component-card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.component-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ifm-color-emphasis-600);
}

.component-card-icon {
  color: var(--ifm-navbar-link-color);
  flex-shrink: 0;
}

.component-card-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.component-card-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--ifm-heading-color);
}

.component-card-description {
  margin: 0;
  color: var(--ifm-color-emphasis-700);
  line-height: 1.5;
  font-size: 1rem;
}

/* This magic number 462 is the size of the article div container as rendered */
@container (width > 462px) {
  .qs-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* This magic number 743 is the size of the article div container as rendered */
@container (width > 743px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .component-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .qs-cards {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

a.card {
  box-shadow: none;
  padding: 1.25rem 1rem;
  border: 1px solid var(--ifm-toc-border-color);
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  max-width: 550px;
  text-decoration: none;
  background-color: var(--ifm-background-color);
}

.qs-cards a.card {
  padding: 1rem 1rem;
}

a.card > div {
  overflow: hidden;
}

a.card svg {
  min-width: 40px;
}

a.card:hover {
  box-shadow: none;
  background-color: var(--ifm-menu-color-background-active);
  color: var(--ifm-font-color-base);
  text-decoration: none;
}

a.card h2 {
  font-size: 0.9375rem;
}

a.card p {
  font-size: 0.75rem;
}

a.card h2,
a.card p {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

a.card.convex-hero-card {
  margin: 2rem 0 2rem;
  position: relative;
  padding: 1.5rem;
  gap: 1.5rem;
}

a.card.convex-hero-card p {
  display: none;
}

@media (min-width: 997px) {
  a.card.convex-hero-card h2 {
    font-size: 1.25rem;
  }

  a.card.convex-hero-card {
    max-width: 100%;
  }

  a.card.convex-hero-card::after {
    content: "→";
    position: absolute;
    right: 1.5rem;
    font-size: 2rem;
  }
}

/* END: Custom cards implementation */

/* No "card" stylization for pagination links */
a.pagination-nav__link {
  border-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Pagination "previous"/"next" style */
a.pagination-nav__link .pagination-nav__sublabel {
  color: var(--ifm-font-color-base);
  font-size: 1rem;
}

/* Pagination doc name style */
a.pagination-nav__link .pagination-nav__label {
  color: var(--ifm-color-primary);
  font-size: 1.5rem;
  font-weight: 400;
}

/* Pagination doc name hover style */
a.pagination-nav__link .pagination-nav__label:hover {
  color: var(--ifm-color-primary-darkest);
}

/* START: Swap where arrows are shown in pagination */
.pagination-nav__link--prev .pagination-nav__label::before {
  content: none;
}

.pagination-nav__link--prev .pagination-nav__sublabel::before {
  content: "← ";
}

.pagination-nav__link--next .pagination-nav__label::after {
  content: none;
}

.pagination-nav__link--next .pagination-nav__sublabel::after {
  content: " →";
}
/* END: Swap where arrows are shown in pagination */

/* Stylize the top doc headings to match convex.dev */
.markdown h1:first-child {
  --ifm-h1-font-size: 2rem;
  margin-top: 1.25rem;
  --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (min-width: 997px) {
  .markdown h1:first-child {
    --ifm-h1-font-size: 2.5rem;
  }
}

/* Make other headings less bold */
h1,
h2,
h3,
h4 {
  --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2.text--truncate {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    sans-serif,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  letter-spacing: 0;
}

ul.menu__list {
  transition: 150ms ease-in-out !important;
}

/* Top level sidebar items have bolder color */
.theme-doc-sidebar-item-link-level-1 > a.menu__link:not(.menu__link--active),
.theme-doc-sidebar-item-category-level-1
  > .menu__list-item-collapsible
  > a.menu__link:not(.menu__link--active) {
  color: var(--ifm-navbar-link-color);
}

/* Active sidebar links have bold text color */
.menu__list-item > .menu__link--active:not(.menu__link--sublist),
.menu__list-item-collapsible--active > .menu__link--active {
  font-weight: 600;
}

/* Active sidebar links have distinct background */
.menu__list-item-collapsible--active {
  background: var(--ifm-menu-color-background-active);
}

/* Sidebar: Don't change the distinct background on hover for active category links */
.menu__list-item-collapsible--active:hover {
  background: var(--ifm-menu-color-background-active);
}

/* Navbar: Hide the default Docusaurus search box */
.navbar__items--right [class*="searchBox_"] {
  display: none;
}

/* Fix the active state of categories that forward to an internal page in the category. */
.convex-sidebar-no-category-page > .menu__list-item-collapsible--active {
  background: var(--ifm-background-color);
}

.convex-sidebar-no-category-page > .menu__list-item-collapsible--active:hover {
  background: var(--ifm-menu-color-background-hover);
}

.convex-sidebar-no-category-page
  > .menu__list-item-collapsible--active
  > .menu__link--active {
  font-weight: 400;
}

/* Sidebar dividers */
.convex-menu-divider {
  margin: 1rem 0.625rem;
  background-color: var(--ifm-toc-border-color);
}

/* Sidebar headers */
.convex-menu-header {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-n8);
  padding: 0.5rem 0.75rem;
}
html[data-theme="dark"] .convex-menu-header {
  color: var(--color-n6);
}

/* Sidebar: Increase level 2 padding because top level has icons */
.theme-doc-sidebar-item-category-level-1 > ul.menu__list {
  padding-left: 1.25rem;
}

.theme-doc-sidebar-menu {
  padding-bottom: 2rem;
}

/* Sidebar: Icons styling */
.theme-doc-sidebar-item-link-level-1 > a::before,
.theme-doc-sidebar-item-category-level-1 > div > a::before {
  padding-left: 0.125rem;
  padding-right: 0.5rem;
  padding-top: 0;
  width: 1rem;
  height: 1.0625rem;
  content: var(--convex-icon);
  filter: var(--convex-sidebar-icon-filter);
}

.theme-doc-sidebar-item-link-level-2 > a::before,
.theme-doc-sidebar-item-category-level-2 > div > a::before {
  padding-left: 0.125rem;
  padding-right: 0.5rem;
  padding-top: 0;
  width: 1rem;
  height: 1.0625rem;
  content: var(--inner-convex-icon);
  filter: var(--convex-sidebar-icon-filter);
}

/* Ensures all menu items are the same height, with or without a submenu. */
.menu__link {
  min-height: 1.875rem;
}

/* Sidebar: Hide the button to go to the primary menu on mobile (we use only the secondary menu) */
.navbar-sidebar__back {
  display: none;
}

/* Sidebar: Fix the header layout on mobile */
.navbar-sidebar .navbar__brand {
  flex: 1;
}

/* Sidebar: Mobile-only items (that are shown in the navbar on larger screens) */
@media (min-width: 997px) {
  .convex-sidebar-mobile-only {
    display: none;
  }
}

/* Sidebar: Move the “external link” icon to the right */
.convex-sidebar-external-link svg {
  margin-left: auto;
}

/* START: Icons for each top level item */
.convex-sidebar-home {
  --convex-icon: url("../../static/img/sidebar-icons/home.svg");
}

.convex-sidebar-stack {
  --convex-icon: url("../../static/img/sidebar-icons/stack.svg");
}

.convex-sidebar-discord {
  --convex-icon: url("../../static/img/sidebar-icons/discord.svg");
}

.convex-sidebar-github {
  --convex-icon: url("../../static/img/sidebar-icons/github.svg");
}

.convex-sidebar-tutorial {
  --convex-icon: url(heroicons/24/outline/academic-cap.svg);
}

.convex-sidebar-quickstart {
  --convex-icon: url("../../static/img/sidebar-icons/lightning-bolt.svg");
}

.convex-sidebar-understand {
  --convex-icon: url("../../static/img/sidebar-icons/med.svg");
}

.convex-sidebar-functions {
  --convex-icon: url("../../static/img/sidebar-icons/code.svg");
}

.convex-sidebar-database {
  --convex-icon: url(heroicons/24/outline/circle-stack.svg);
}

.convex-sidebar-file-storage {
  --convex-icon: url("../../static/img/sidebar-icons/image.svg");
}

.convex-sidebar-auth {
  --convex-icon: url("../../static/img/sidebar-icons/person.svg");
}

.convex-sidebar-scheduling {
  --convex-icon: url("../../static/img/sidebar-icons/clock.svg");
}

.convex-sidebar-search {
  --convex-icon: url("../../static/img/sidebar-icons/magnifying-glass.svg");
}

.convex-sidebar-self-hosting {
  --convex-icon: url("../../static/img/sidebar-icons/server.svg");
}

.convex-sidebar-realtime {
  --convex-icon: url("../../static/img/sidebar-icons/lightning-bolt.svg");
}

.convex-sidebar-components {
  --convex-icon: url("../../static/img/sidebar-icons/components.svg");
}

.convex-sidebar-ai {
  --convex-icon: url("../../static/img/sidebar-icons/magic-wand.svg");
}

.convex-sidebar-ai-agents {
  --convex-icon: url("../../static/img/sidebar-icons/bot.svg");
}
.convex-sidebar-platform-apis {
  --convex-icon: url("../../static/img/sidebar-icons/grid.svg");
}

.convex-sidebar-chef {
  --convex-icon: url("../../static/img/sidebar-icons/chef.svg");
}

.convex-sidebar-production {
  --convex-icon: url("../../static/img/sidebar-icons/paper-plane.svg");
}

.convex-sidebar-testing {
  --convex-icon: url("../../static/img/sidebar-icons/list-bullet.svg");
}

.convex-sidebar-react {
  --convex-icon: url("../../static/img/sidebar-icons/react.svg");
}

.convex-sidebar-react-native {
  --convex-icon: url("../../static/img/sidebar-icons/react-native.svg");
}

.convex-sidebar-javascript {
  --convex-icon: url("../../static/img/sidebar-icons/javascript.svg");
}

.convex-sidebar-vue {
  --convex-icon: url("../../static/img/sidebar-icons/vue.svg");
}

.convex-sidebar-vue {
  --inner-convex-icon: url("../../static/img/sidebar-icons/nuxt.svg");
}

.convex-sidebar-open-api {
  --convex-icon: url("../../static/img/sidebar-icons/open-api.svg");
}

.convex-sidebar-vue a:after,
.convex-sidebar-nuxt a:after {
  font-weight: 400;
  font-size: 0.6em;
  margin-left: 1em;
  content: "Community";
  border-radius: 10px;
  border: solid 1px gray;
  padding: 2px 8px;
  float: right;
  /* overriding collaps-y caret */
  transform: rotateZ(0deg) !important;
}

/* Vue */
.convex-sidebar-vue
  .menu__list-item
  > .menu__link--active:not(.menu__link--sublist):after,
.convex-sidebar-vue
  .menu__list-item-collapsible--active
  > .menu__link--active:after {
  /* shift left to compensate for text to the left being bold */
  margin-left: 0.9em;
}
/* Nuxt */
.convex-sidebar-vue
  .theme-doc-sidebar-item-link-level-2
  > .menu__link--active:after {
  /* shift left to compensate for text to the left being bold */
  margin-left: 0.9em;
}

.convex-sidebar-cli .menu__list li:first-child .menu__link:after,
.convex-sidebar-cli .menu__list li:nth-child(2) .menu__link:after {
  font-weight: 400;
  font-size: 0.6em;
  margin-left: 1em;
  content: "Beta";
  border-radius: 10px;
  border: solid 1px gray;
  padding: 2px 8px;
  float: right;
}

.convex-sidebar-cli .menu__list li:first-child .menu__link--active:after {
  /* shift left to compensate for text to the left being bold */
  margin-left: 0.7em;
}

.convex-sidebar-cli .menu__list li:nth-child(2) .menu__link--active:after {
  /* shift left to compensate for text to the left being bold */
  margin-left: 0.8em;
}

.convex-sidebar-svelte {
  --convex-icon: url("../../static/img/sidebar-icons/svelte.svg");
}

.convex-sidebar-nextjs {
  --convex-icon: url("../../static/img/sidebar-icons/nextjs.svg");
}

.convex-sidebar-tanstack {
  --convex-icon: url("../../static/img/sidebar-icons/tanstack.svg");
}

.convex-sidebar-python {
  --convex-icon: url("../../static/img/sidebar-icons/python.svg");
}

.convex-sidebar-rust {
  --convex-icon: url("../../static/img/sidebar-icons/rust.svg");
}

.convex-sidebar-android {
  --convex-icon: url("../../static/img/sidebar-icons/android.svg");
}

.convex-sidebar-swift {
  --convex-icon: url("../../static/img/sidebar-icons/swift.svg");
}

.convex-sidebar-dashboard {
  --convex-icon: url("../../static/img/sidebar-icons/dashboard.svg");
}

.convex-sidebar-cli {
  --convex-icon: url("../../static/img/sidebar-icons/keyboard.svg");
}

.convex-sidebar-convex-api {
  --convex-icon: url(heroicons/24/outline/book-open.svg);
}

.convex-sidebar-generated-code {
  --convex-icon: url(heroicons/24/outline/book-open.svg);
}

.convex-sidebar-http-api {
  --convex-icon: url(heroicons/24/outline/book-open.svg);
}

.convex-sidebar-eslint {
  --convex-icon: url("../../static/img/sidebar-icons/eslint.svg");
}

/* END: Icons for each top level item */

/* Make sure footer is always pushed below fold */
body #__docusaurus .theme-doc-sidebar-container {
  min-height: 100vh;
}

/* Footer gets same border as top nav */
footer {
  border-top: 1px solid var(--ifm-toc-border-color);
}

/* Drop the arrow icons in footer */
.footer__links svg {
  display: none;
}

/* Don't show the dots between footer links */
.footer__link-separator {
  display: none;
}

/* Increase footer padding on small screens */
@media (max-width: 996px) {
  .footer {
    --ifm-footer-padding-horizontal: 1rem;
  }
}

/* Make the copyright text smaller */
.footer__copyright {
  font-size: 0.75rem;
}

/* Lay out copyright on left and links on right */
footer > .container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  max-width: unset;
}

/* Don't add more margin to the footer */
.footer__links {
  margin-bottom: 0;
}

/* START: Footer icons */
.footer__links .footer__links {
  display: flex;
  gap: 1.5rem;
}

.footer__links .convex-icon-link {
  width: 1.25rem;
  height: 1.5rem;
  margin: 0;
  display: block;
  background-color: var(--ifm-navbar-link-color);
  font-size: 0;
}

.footer__links .convex-icon-link:hover {
  background-color: var(--ifm-navbar-link-hover-color);
}

.footer__links .convex-github-logo {
  mask: url("../../static/img/github-logo.svg") no-repeat center;
}

.footer__links .convex-twitter-logo {
  mask: url("../../static/img/twitter-logo.svg") no-repeat center;
}

.footer__links .convex-discord-logo {
  mask: url("../../static/img/discord-logo.svg") no-repeat center;
}
/* END: Footer icons */

/* Fix the "Back" button in the sidebar on mobile */
.navbar-sidebar__back {
  background: var(--ifm-hover-overlay);
}

/* Mobile Table of Contents dont have targetable classnames, reset their background */
main article > div {
  --ifm-menu-color-background-active: var(--ifm-hover-overlay);
}

/* Make sure ToC doesn't just blend with content that overlaps left side of the
  content column, like YouTube video players */
.theme-doc-toc-desktop {
  background-color: var(--convex-toc-background-color);
}

/* START: StepByStep styling */
.convex-step-by-step {
  margin-bottom: 2rem;
}

.convex-step {
  margin-bottom: 2rem;
}

@media (min-width: 997px) {
  .convex-step-by-step,
  .convex-full-width {
    width: calc(
      min(var(--ifm-container-width-xl), 100vw - var(--doc-sidebar-width)) - 4 *
        var(--convex-container-padding-horizontal)
    );
    z-index: 100;
    position: relative;
    background: var(--convex-opaque-background-color);
    box-shadow: var(--convex-opaque-background-color) 0 0 10px 10px;
    /* Fixes a Safari bug where the table of contents would sometimes appear on
    top of this element while scrolling. This transform has no visual effect,
    but creates a new stacking context to keep things in order.
    See: https://linear.app/convex/issue/CX-3830/
    */
    -webkit-transform: translate3d(0, 0, 0);
  }

  .convex-step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
    margin-bottom: 0;
  }
}

.convex-step code {
  overflow-x: auto;
}
/* END: StepByStep styling */

/* Ensure that content within the main column can overlap the table of contents. */
main .container .col[class*="docItemCol"] {
  z-index: 50;
}

.convex-inline-code-with-copy-button {
  display: inline-flex;
  line-height: 0.95rem;
  padding-top: 0.2rem;
}

.convex-inline-code-copy-button {
  line-height: 0;
}

.convex-inline-code-copy-button button {
  display: flex;
  align-items: center;
  background: var(--prism-background-color);
  color: var(--prism-color);
  padding-left: 0.5rem;
  line-height: 0;
  transition: opacity 200ms ease-in-out;
  opacity: 0.4;
}

.convex-inline-code-copy-button button:hover {
  opacity: 1;
}

/* START: TourGuide styling */

.convex-tour-guide {
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: var(--ifm-color-info-contrast-background);
  border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
  border-left-width: var(--ifm-alert-border-left-width);
  border-radius: var(--ifm-alert-border-radius);
  box-shadow: var(--ifm-alert-shadow);
  margin-bottom: 1.5rem;
}

@media (min-width: 997px) {
  .convex-tour-guide {
    flex-direction: row;
  }

  .convex-tour-guide > div {
    max-width: 50%;
  }
}

.markdown .convex-tour-guide li > p {
  margin-top: 0;
}

.convex-tour-guide > div > p {
  margin-bottom: 0;
}

.convex-tour-guide h5 {
  text-transform: uppercase;
}

.convex-tour-guide img {
  border: 1px solid var(--ifm-color-info-dark);
  border-radius: 8px;
}

.convex-side-by-side {
  display: flex;
  flex-direction: column;
}

.convex-side-by-side video {
  width: 100%;
}

.convex-side-by-side caption {
  display: block;
  font-style: italic;
}

@media (min-width: 500px) {
  .convex-side-by-side video {
    max-width: 500px;
  }
}

@media (min-width: 997px) {
  .convex-side-by-side {
    display: grid;
    grid-template-columns: 60% auto;
    gap: 2rem;
  }

  .theme-admonition .convex-side-by-side {
    gap: 1rem;
  }

  .convex-side-by-side.convex-balanced {
    grid-template-columns: 1fr 1fr;
  }
}

/* END: TourGuide styling */

/* START: Zen of Convex styling */

.zen-tip {
  margin-bottom: 2.5em;
}
h2.zen-header {
  margin-top: 2em;
}
.zen-tip h3,
.zen-header {
  display: flex;
  gap: 0.3em;
  align-items: center;
}
.zen-tip svg,
.zen-header svg {
  width: 2rem;
  height: 2rem;
}
.zen-do h3 > svg {
  color: var(--convex-zen-do-color);
}
.zen-do-not h3 > svg {
  color: var(--convex-zen-do-not-color);
}

/* END: Zen styling */

/* Main page hero text */
.convex-hero {
  font-size: 1.25rem;
}

/* Helper for centering images */
.center-image {
  margin: 0 auto;
}

/* Fix pages should not be too wide, except for all the quick starts and management API docs */
html:not([class*="docs-doc-id-quickstart/"]):not(
    [class*="docs-doc-id-management-api/"]
  ):not([class*="docs-doc-id-deployment-api/"])
  main
  > .container
  > .row
  .col {
  max-width: 800px !important;
  margin: 0 auto;
}

@media (min-width: 997px) {
  html:not([class*="docs-doc-id-quickstart/"]):not(
      [class*="docs-doc-id-management-api/"]
    ):not([class*="docs-doc-id-deployment-api/"])
    main
    > .container
    > .row
    .col {
    margin: unset;
  }
}

/* Border for screenshots that are confusing if left on white background */
.screenshot-border {
  border-radius: var(--ifm-code-border-radius);
  box-shadow: var(--ifm-global-shadow-lw);
}

/* Make space for language selector in code blocks */
.codeblock-header {
  display: flex;
  justify-content: space-between;
}

@import url("./language-selector.css");

/* FROM HERE ON: Dark mode styles */

html[data-theme="dark"] {
  --convex-opaque-background-color: var(--ifm-background-color);
  --ifm-color-content: white;
  --ifm-background-color: rgb(20, 20, 20);
  --ifm-toc-border-color: #3f3f3f;
  --ifm-color-primary: #f3b01c;
  --ifm-color-primary-darkest: #ae7e15;
  --ifm-menu-color: #c2c2c2;
  --convex-docs-logo-font-color: white;
  --convex-code-border-color: rgba(255, 255, 255, 0.1);
  --convex-code-block-header-background-color: rgba(138, 208, 255, 0.1);

  --ifm-navbar-background-color: var(--ifm-background-color);
  --ifm-card-background-color: #313131;

  --ifm-menu-color-active: white;
  --ifm-menu-color-background-active: rgb(73, 76, 84);
  --convex-active-background: rgb(73, 76, 84);
  --convex-sidebar-icon-filter: invert(100%);
  --convex-toc-background-color: var(--ifm-background-color);
  --ifm-menu-link-sublist-icon-filter: brightness(0) invert(100%);
  --convex-link-underline-color: #888;

  --convex-zen-do-color: var(--ifm-color-success-lightest);
  --convex-zen-do-not-color: var(--ifm-color-warning-lightest);

  --color-error: #fca5a5;
}

/* Fixes the highlighted code line background */
html[data-theme="dark"] .theme-code-block-highlighted-line {
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05);
}

/* Custom card icons that were tagged as needing color inversion */
html[data-theme="dark"] a.card.convex-invert-icon svg {
  filter: invert(100%);
}

@media (max-width: 996px) {
  .navbar__brand {
    margin-right: auto;
  }
}

.StackPosts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  container-type: inline-size;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ifm-toc-border-color);
}

.StackPosts-title {
  font-family: "GT America", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.375rem;
  font-weight: bold;
  font-size: 1.25rem;
}

.StackPosts-title-imageLink {
  display: flex;
  position: relative;
  top: -0.125rem;
}

.StackPosts-title-image--dark {
  display: none;
}

html[data-theme="dark"] .StackPosts-title-image--light {
  display: none;
}

html[data-theme="dark"] .StackPosts-title-image--dark {
  display: block;
}

.StackPosts-posts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@container (min-width: 45rem) {
  .StackPosts-posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.StackPosts-post {
  display: flex;
  gap: 1rem;
  text-decoration: none;
  color: var(--ifm-font-color-base);
}

.StackPosts-post:hover {
  text-decoration: none;
  color: var(--ifm-font-color-base);
}

.StackPosts-post-image {
  border-radius: 0.375rem;
  flex-shrink: 0;
  border: 1px solid var(--color-n7);
  width: 11rem;
  height: 6rem;
  object-fit: cover;
}

.StackPosts-post-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.StackPosts-post-content-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-size: 1.125rem;
  line-height: 1.375rem;
  overflow: hidden;
  padding-bottom: 0.125rem;
}

.StackPosts-post:hover .StackPosts-post-content-title {
  text-decoration: underline;
}

.StackPosts-post-content-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.StackPosts-post-content-author-image {
  border-radius: 50%;
  object-fit: cover;
}

.StackPosts-post-content-author-name {
  font-size: 0.875rem;
}

/* START: Large cards implementation */
.large-cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

@container (width > 743px) {
  .large-cards {
    grid-template-columns: 1fr 1fr;
  }
}

a.large-card {
  box-shadow: none;
  padding: 1.25rem;
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: var(--ifm-card-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  min-height: 130px;
  text-decoration: none;
  background-color: var(--ifm-background-color);
}

a.large-card:hover {
  box-shadow: none;
  background-color: var(--ifm-menu-color-background-active);
  color: var(--ifm-font-color-base);
  text-decoration: none;
}

a.large-card h2 {
  font-size: 1.125rem;
  margin: 0;
}

a.large-card p {
  font-size: 1rem;
  margin: 0;
  color: var(--ifm-color-emphasis-700);
  line-height: 1.5;
}

/* END: Large cards implementation */

/* Video link cards */
.video-cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 997px) {
  .video-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

a.video-card {
  box-shadow: none;
  padding: 1.25rem;
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: var(--ifm-card-border-radius);
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  background-color: var(--ifm-background-color);
}

a.video-card:hover {
  box-shadow: none;
  background-color: var(--ifm-menu-color-background-active);
  color: var(--ifm-font-color-base);
  text-decoration: none;
}

a.video-card .play-icon {
  color: var(--ifm-font-color-base);
  flex-shrink: 0;
}

a.video-card h2 {
  font-size: 1rem;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  font-weight: 400;
  font-family: var(--ifm-font-family-base);
  letter-spacing: normal;
  max-height: 2.4em;
}

@media (prefers-reduced-motion: no-preference) {
  .animate-slideToTop {
    animation: slideToTop 0.15s ease-in-out;
  }
}

@keyframes slideToTop {
  from {
    transform: translateY(80%);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
  }
}
